jQuery 数据交互

前言：

jQuery 数据交互；

一、javascript 对象格式

1. JS 中的对象格式，是一种保存数据的格式，什么数据都能够保存的。是目前最强大的保存数据的格式。
    可以理解成是一个键值对的集合，键是调用每个值的名称，值可以是基本变量，还可以是函数和对象。

2. 通过实例化对象去创建

    var person = new Object();

    // 添加属性：
    person.name = 'tom';
    person.age = '25';
    
    // 添加方法：
    person.sayName = function(){
        alert(this.name);
    }
    
    // 调用属性和方法：
    alert(person.age);
    person.sayName();

3. 通过对象直接量的方式创建对象

    var person2 = {
        name:'Rose',
        age: 18,
        sayName:function(){
            alert('My name is' + this.name);
        }
    }
    
    // 调用属性和方法：
    alert(person2.age);
    person2.sayName();

二、json

1. json 
    是 JavaScript Object Notation 的首字母缩写，单词的意思是 javascript 对象表示法，
    类似于 javascript 对象的一种数据格式对象，目前这种数据格式比较流行，逐渐替换掉了传统的 xml 数据格式。

2. json 数据对象
    类似于 JavaScript 中的对象，但是它的键对应的值里面是没有函数方法的，
    值可以是普通变量，不支持 undefined，值还可以是数组或者 json 对象。

3. 与 JavaScript 对象写法的不同
    json 对象的属性名称和字符串值需要用双引号引起来，
    用单引号或者不用引号会导致读取数据错误。

4. json 格式的数据
    
        {
            "name":"tom",
            "age":18
        }
        
    json 的另外一个数据格式是数组，和 javascript 中的数组字面量相同：
    
        ["tom",18,"programmer"]
        
    还可以是更复杂的数据机构：
    
        {
            "name":"jack",
            "age":29,
            "hobby":["reading","travel","photography"]
            "school":{
                "name":"Merrimack College",
                "location":'North Andover, MA'
            }
        }

三、ajax

1. ajax
    一个前后台配合的技术，它可以让 javascript 发送 http 请求，与后台通信，获取数据和信息。
    ajax 技术的原理是实例化 xmlhttp 对象，使用此对象与后台通信。
    jquery 将它封装成了一个函 数$.ajax()，我们可以直接用这个函数来执行 ajax 请求。

    ajax 需要在服务器环境下运行。

2. $.ajax使用方法

    常用参数：
    1、url 请求地址
    2、type 请求方式，默认是'GET'，常用的还有'POST'
    3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'
    4、data 设置发送给服务器的数据
    5、success 设置请求成功后的回调函数
    6、error 设置请求失败后的回调函数
    7、async 设置是否异步，默认值是'true'，表示异步

    以前的写法：
    
        $.ajax({
            url: '/change_data',
            type: 'GET',
            dataType: 'json',
            data:{'code':300268}
            success:function(dat){ 
                // dat 如果要读取文件中的数据，传一个形参。这个形参相当于给这个 json 文件起了个名字
                alert(dat.name);
            },
            error:function(){
                alert('服务器超时，请重试！');
            }
        });
        
    新的写法(推荐)：
    
        $.ajax({
            url: '/change_data',
            type: 'GET',
            dataType: 'json',
            data:{'code':300268}
        })
        .done(function(dat) {
            alert(dat.name);
        })
        .fail(function() {
            alert('服务器超时，请重试！');
        });
        
    $.ajax 的简写方式
    
        $.ajax 按照请求方式可以简写成 $.get 或者 $.post 方式
        
        $.get("/change_data", {'code':300268},
          function(dat){
            alert(dat.name);
        });
        
        $.post("/change_data", {'code':300268},
          function(dat){
            alert(dat.name);
        });
        
3. 360 搜索请求
    
	$(function(){
		// 键盘按一次，触发一次。请求数据是输入一个字就请求一次的
		$('input').keyup(function(){
			$.ajax({
				//https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
				url:'https://sug.so.360.cn/suggest',
				type:'get',
				// 跨域请求，要把数据格式改为 jsonp
				// 跨域：读取别人服务器的信息
				dataType:'jsonp',
				// 设置发送给服务器的数据
				// 这里面设置的是发送给服务器的东西，相当于一把钥匙，你里面的参数要跟人家的参加一样，才会给这个权利你进入服务器
				data:{
					//callback:'suggest_so',
					encodein:'utf-8',
					encodeout:'utf-8',
					format:'json',
					fields:'word',
					// 这里是设置发送给 360 数据的参数
					word:$(this).val()
				}
			})
			// 成功之后的回调函数。新的写法
			.done(function(data){
				// 要先清空 ul 的内容，要不然，每次数据都会叠加
				$('ul').html('')
				// console.log(data.result[2].word) 能够读取某一条数据
				for(var i=0;i<data.result.length;i++){
					var oLi = '<li>'+data.result[i].word+'</li>'
					$('ul').append(oLi)
				}
			})
			// 失败之后的回调函数。新的写法
			.fail(function(){
				alert('服务器超时，请重试！')
			})
		})
	})
	...
	<input type="text" />
	<ul>
		<!--<li>把搜索数据打印在这个地方</li>-->
	</ul>